<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="health-indicator">
    <h2>您很健康！</h2>
    <div class="slider-wrapper">
      <van-slider
        v-model="healthLevel"
        vertical
        step="1"
        min="0"
        max="4"
        bar-height="200px"
        class="custom-vertical-slider"
      />
      <div class="labels">
        <div
          v-for="label in labels"
          :key="label.text"
          :style="{ bottom: label.position }"
          class="label"
        >
          <span>{{ label.text }}</span>
        </div>
      </div>
    </div>
    <van-button type="primary" class="submit-button" @click="$router.push('/search')"
      >搜索菜谱</van-button
    >
  </div>
</template>

<script setup>
import { ref } from 'vue'

const healthLevel = ref(2) // 默认健康状态
const labels = [
  { text: '完美', position: '90%' },
  { text: '健康的', position: '70%' },
  { text: '平均', position: '50%' },
  { text: '不够好', position: '30%' },
  { text: '较差', position: '10%' },
]
</script>

<style lang="css" scoped>
.health-indicator {
  text-align: center;
  padding: 20px;
}

.slider-wrapper {
  position: relative;
  height: 200px; /* 进度条高度 */
  margin: 20px auto;
}

.custom-vertical-slider .van-slider__track {
  background-color: #ddd; /* 背景颜色 */
}

.custom-vertical-slider .van-slider__fill {
  background: linear-gradient(to top, #ff4081, #8e24aa); /* 渐变颜色 */
}

.custom-vertical-slider .van-slider__thumb {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #8e24aa;
}

.labels {
  position: absolute;
  left: -80px; /* 调整标签的位置，使其不要重叠进度条 */
}

.label {
  position: absolute;
  left: 50%; /* 标签居中 */
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: black;
  color: white;
  border-radius: 4px;
  font-size: 12px;
}

.submit-button {
  margin-top: 20px;
}
</style>
